<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
    <script type="text/javascript">
       /* function  fun1() {
            var divEle = document.querySelector('#div1');
            var spanEle = document.querySelector('#span1');
            divEle.appendChild(spanEle);
        }
        function fun3() {
            var divEle = document.querySelector('#div3');
            var spanEle = document.querySelector('span');
            spanEle.innerText='new span';
            divEle.appendChild(spanEle);
        }*/
       function fun4() {
           var selectEle = document.querySelector('#character');
           var z = document.createElement('option');
           console.log(z);
           z.innerText='诸葛亮';
           var g = document.querySelector('#item2');
           selectEle.insertBefore(z,g);
       }
       function fun5() {
           var selectEle = document.querySelector('#character');
           var w = document.createElement('option');
           w.innerText='魏延';
           var g = document.querySelector('#item2');
           selectEle.replaceChild(w,g);
       }
       function fun6() {
           var selectEle = document.querySelector('#character');
           var z = document.querySelector('#item3');
           selectEle.removeChild(z);
       }
    </script>
</head>
<body>
<span id="span1">span1</span>
<span id="span2">span2</span>
<div id="div1" style="background-color: green">1</div>
<div id="div2" style="background-color: yellow">2</div>
<div id="div3" style="background-color: red;">3</div>
<button onclick="fun1()">把span1添加到div1</button>
<button onclick="fun2()">把span2添加到div2</button>
<button onclick="fun3()">把创建span元素添加到div3</button><br/>
<select id="character" size="7">
    <option id="item1">刘备</option>
    <option id="item2">关羽</option>
    <option id="item3">张飞</option>
    <option id="item4">赵云</option>
</select>
<button onclick="fun4()">在关羽之前插入诸葛亮</button>
<button onclick="fun5()">把关羽换成魏延</button>
<button onclick="fun6()">删除张飞</button><br/>
</body>
</html>

